<template>
  <div class="setting">
    <van-nav-bar
        title="个人信息"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-divider/>
    <van-cell title="头像" center isLink>
      <template #title>
        <div class="avatar">
          头像
          <van-image
              round
              width="0.9rem"
              height="0.9rem"
              :src="img_prefix_url + userInfo.imageUrl"
          />
        </div>
      </template>
      <template #right-icon>
        <van-uploader :after-read="afterRead"/>
        <van-icon name="arrow"/>
      </template>
    </van-cell>
    <van-cell title="名称" :value="userInfo.name"/>
    <van-cell title="邮箱" :value="userInfo.email"/>
    <van-divider/>
    <van-cell title="修改密码" @click="changePassword" isLink/>
<!--    <van-cell title="地址" @click="onClickBtn" isLink/>-->
  </div>
</template>

<script setup lang="ts">
import {ref,reactive,toRefs} from "vue";
import {uploadAvatar,updaterAvatar} from "../api/user";


let state = reactive({
  userInfo:{}
})
let {userInfo} = toRefs(state)
//userInfo.value = JSON.parse(localStorage.getItem('hsjyUserInfo'))
userInfo = JSON.parse(localStorage.getItem('hsjyUserInfo'))
console.log("userInfo:",userInfo)
import {useRouter} from "vue-router";
const img_prefix_url ="https://yw.52kfw.cn"
const router = useRouter()
const onClickLeft =()=>{
  router.back()
}
const changePassword =()=>{
  router.push('/password')
}

const afterRead = async (file) => {
  let data = new FormData()
  data.append("cover",file.file)
  let uploadInfo = await uploadAvatar(data)
  if (uploadInfo.statusCode == 200) {
    let info = await updaterAvatar({_id:userInfo._id,imageUrl:uploadInfo.data.url})
    userInfo.imageUrl = uploadInfo.data.url
  }

};
</script>

<style scoped lang="less">
.setting {
  .avatar {
    display: flex;
    align-items: center;
    .van-image {
      margin-left: 0.15rem;
    }
  }
}
</style>
